<template name="餐饮明细">
  <div v-loading="loading" class="gl_heightFull">
    <div class="gl_row_box gl_mb_15">餐饮产生总金额：{{ (amount / 100).toFixed(2) }} 元</div>
    <div class="gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>餐馆名称</p>
          <el-input v-model="form.Filter" placeholder="请输入餐馆名称查询" size="mini" clearable @change="getData()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getData()">查询</el-button>
          <el-button :loading="buLoading" style="margin-top:27px" type="success" size="mini" @click="exportData()">导出Excel表格</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="listData.length > 0">
      <div v-for="item in listData" :key="item.id" class="gl_borderBox gl_mt_15">
        <el-row class="gl_mb_20" :gutter="20" type="flex" justify="space-between">
          <el-col :span="10">
            <span class="gl_pr_15">{{ item.name }}</span>
          </el-col>
          <el-col :span="10" align="right">
            <span>总金额：</span>
            <span>￥ {{ (item.amount / 100).toFixed(2) }} 元</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col :span="10" class="gl_fs_12 gl_pt_5">
            <span>地址：</span>
            <span>{{ item.address }}</span>
          </el-col>
          <el-col :span="6" align="right">
            <el-button type="primary" size="mini" @click="detail(item.launchedRestaurantId)">查看详情</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else style="line-height: 300px" class="gl_noData_mockTable">
      <p>暂无数据</p>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="form.Page"
        :page-size="form.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  api_GET_EventsManagementLogisticsStatisticsRestaurantStatistics
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementLogisticsStatisticsRestaurantStatisticsQO
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'Restaurant',
  data() {
    return {
      buLoading: false,
      totalPage: 0, // 总条目数
      form: new Api_GET_EventsManagementLogisticsStatisticsRestaurantStatisticsQO(),
      gameId: '', // 赛事id
      amount: 0,
      listData: []
    };
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getData();
  },
  methods: {
    // 获取列表数据
    getData(page) {
      var that = this;
      that.loading = true;
      that.form.Page = page || 1;
      that.form.SkipCount = (that.form.Page - 1) * that.form.MaxResultCount;
      that.form.ProviderKey = that.gameId;
      api_GET_EventsManagementLogisticsStatisticsRestaurantStatistics(that.form).then(res => {
        that.listData = res.restaurantStatistics;
        that.amount = res.totalAmount;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '获取饭店数据失败' });
      });
    },
    // 导出表格
    exportData() {
      var that = this;
      this.buLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '餐饮金额' + '.xlsx';
      const params = {};
      params.ReportName = 'CateringEntryStatistics';
      const form = JSON.parse(JSON.stringify(that.form));
      delete form.SkipCount;
      delete form.MaxResultCount;
      delete form.Page;
      params.RestaurantEntryInput = JSON.stringify(form);
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params).then(res => {
        that.buLoading = false;
      }).catch(error => {
        that.buLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 查看详情
    detail(id) {
      const isParentId = this.$route.params.parentId;
      const { query } = this.$route;
      query.id = id;
      this.$router.push({
        name: isParentId ? 'LeagueRestaurantDetail' : 'RestaurantDetail',
        query: query
      });
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.form.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getData();
    },
    pageIndexChange(currentPage) {
      this.getData(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
